<template>
  <div>
    <p>系统概览</p>
    <!-- 头部数据 -->
    <nums-and :shuju="shuju"></nums-and>
    <div class="echarts">
      <!-- 左侧图表 -->
      <sta-te :shuju="shuju"></sta-te>
      <!-- 右侧图表 -->
      <class-fy :shuju="shuju"></class-fy>
    </div>
  </div>
</template>

<script>
import ClassFy from "./components/ClassFy.vue";
import NumsAnd from "./components/NumsAnd.vue";
import StaTe from "./components/StaTe.vue";

export default {
  components: { NumsAnd, StaTe, ClassFy },
  name: "XTGL",
  data() {
    return {
      shuju: [],
    };
  },
  async created() {
    let _this = this;
    function getNums() {
      return _this.$axios.get("/overview");
    }
    function getState() {
      return _this.$axios.get("/status-overview");
    }
    function getClass() {
      return _this.$axios.get("/category-overview");
    }
    const res = await this.$axios.all([getNums(), getState(), getClass()]);
    // console.log(res);
    this.shuju = res.map((ele) => ele.data.data);
    // console.log(this.shuju);
  },
};
</script>

<style scoped lang="less">
.main {
  width: 600px;
  height: 400px;
}
.echarts {
  width: 100%;
  height: 350px;
  // background: red;
  // border: 1px solid red;
  display: flex;
}
</style>